import { Component } from "react";

const styles = {
    // border: 1px solid blue;
    border: '1px solid blue',
    // line-height: 5rem;
    lineHeight: 5,
    // color: #00f;
    color: '#00f',
    // background-color: #fff ;
    backgroundColor: '#fff'
}

const change = evt => {
    let t = evt.target;
    t.style.backgroundColor = '#ff0';
}

const recover = evt => {
    let t = evt.target;
    t.style.backgroundColor = 'transparent';
}

/* 采用函数式定义的组件是无状态
function Counter(){
  return (
    <div style={ styles } 
         onClick={ increment } 
         onMouseMove={ change }
         onMouseOut={ recover }>
      { count }
    </div>
  );
}*/

// 通过继承 React.Component 来实现有状态组件
class Counter extends Component {
    // 在构造函数中初始化状态
    constructor(){
        // 显式调用父类构造函数
        super();
        // 在组件中使用 state 来保存状态
        this.state = {
            count: 9527,
            label: '计数器'
        }
    }
    // 需要显式书写 render 函数来渲染组件上显示的内容
    render(){
        // 这里一定要使用箭头函数(想一想为什么？)
        const increment = () => {
            console.log( 'increment' );
            // 从 state 中获取数据
            let value = this.state.count ;
            // 通过调用 setState 来修改状态
            this.setState( { count: value + 1 } );
            console.log( this.state );
        };

        return (
            <div style={ styles } 
                onClick={ increment } 
                onMouseMove={ change }
                onMouseOut={ recover }>
                {this.state.label} : { this.state.count }
            </div>
        );
    }
}

export default Counter;